<style scoped lang="scss">
    .login {
        max-width: 300px;
        margin: 0 auto;
    }
    h1 {
        text-align: center;
        font-size: 22px;
        border-bottom: solid 1px #eee;
        padding: 40px 0;
        margin: 40px;
    }
</style>

<template>
    <div>
        <h1>登陆系统</h1>

        <el-form class="login" v-submit="onSubmit" ref="form" :model="form" :rules="rules">
            <el-form-item label="登陆账号" prop="username">
                <el-input v-model="form.username"></el-input>
            </el-form-item>

            <el-form-item label="登陆密码" prop="password">
                <el-input v-model="form.password" type="password"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="success" native-type="submit" style="width: 100%" :loading="subing">登陆</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { Vue, Component } from 'vue-property-decorator'
@Component
export default class Login extends Vue {
    form = {
        username: '',
        password: ''
    }
    rules = {
        username: [
            { required: true, message: '请填写账号' }
        ],
        password: [
            { required: true, message: '请填写密码' }
        ]
    }
    subing = false

    async onSubmit () {
        await this.$validater('form')
        this.subing = true
        const result = await this.$http.post('admin/login', this.form).finally(() => this.subing = false)
        if (result.error) {
            this.$alert(result.error)
        } else {
            this.$router.replace({ name: 'index' })
        }
    }
}
</script>
